<template>
  <Swiper :autoplay="{ delay: 600 }" loop :modules="modules">
    <SwiperSlide
      v-for="(item, idx) in imgList"
      :key="item"
      v-slot="{ isActive, isNext, isPrev, isVisible, isDuplicate }"
    >
      <div class="relative">
        <img :src="item" alt="" />
        <div class="absolute bottom-4 left-6 z-10 text-white text-xl font-bold">
          <div>isActive: {{ isActive }}, isNext:{{ isNext }}, isPrev:{{ isPrev }}</div>
          <div>isVisible: {{ isVisible }}, isDuplicate:{{ isDuplicate }}</div>
          <div>第{{ idx + 1 }}张</div>
        </div>
      </div>
    </SwiperSlide>
  </Swiper>
</template>

<script setup lang="ts">
import { Autoplay } from 'swiper'
import 'swiper/css/autoplay'

const modules = [Autoplay]
//@ts-ignore
const basePath = import.meta.env.BASE_URL
console.log('basePath', basePath)
const imgList = new Array(4).fill(true).map((_, index) => `${basePath}swiper-pic/0${index + 1}.jpg`)
</script>

<style scoped></style>
